<template>
    <Page class="basic company">
        <template #header>
            <RoomInput class="mr-2" multiple :rooms.sync="params.rooms"/>
            <el-input v-model="params.residentName" placeholder="请输入客户名称" />
            <el-input v-model="params.residentPhone" placeholder="请输入住户手机号"/>
            <EdSelect  :selectParams="identityParams" v-model="params.identity"></EdSelect>
            <EdSelect  :selectParams="residentStatusParams" v-model="params.residentStatus"></EdSelect>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()" ><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="住户管理">
            <template #actions>
                <!-- <el-button icon="el-icon-upload2" @click="exportBtn">导出数据</el-button> -->
                <!-- <el-popover
                        placement="bottom"
                        title=""
                        ref="popoverRef"
                        trigger="click">
                    <div slot="">
                        <el-upload
                                class="avatar-uploader"
                                action=""
                                drag
                                accept=".xlsx"
                                :before-upload="beforeAvatarUpload"
                                :http-request="httpRequest"
                                :show-file-list="false">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">
                                <el-link icon="el-icon-download" type="primary" href="/template/room_import_temp.xlsx">住房模板下载</el-link>
                            </div>
                        </el-upload>
                    </div>
                    <el-button  slot="reference" class="marginRight8 marginLeft8" >导入数据</el-button>
                </el-popover> -->
                <el-button class="ed-button ed_black-bottom ed-button36" @click="addOwner()" v-has="'basic:household:add'"><svg-icon icon-class="add-svg"/>新增</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="params">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="categoryName" label="所属公司"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="stagesName" label="分期/园区"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="buildingCode" label="楼栋"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="unitName" label="单元"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="floor" label="楼层"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="roomCode" label="房屋号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="residentName" label="客户名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="手机号码"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="liveTime" label="入住时间" :formatter="formatDate"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="residentStatus" label="住户状态" :formatter="setDicType" >
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="identity" label="住户身份" :formatter="setDicTypeIdentity" >
                    <!-- <template slot-scope="scope">
                        <span v-if="scope.row.identity==0" >业主</span>
                        <span v-else-if="scope.row.identity==1">租户</span>
                        <span v-else>家属</span>
                    </template> -->
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="parkRecord" label="车位信息"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="carCard" label="车牌信息"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="important" label="重要客户">
                    <template slot-scope="scope">
                        <span v-if="scope.row.important==1" >是</span>
                        <span v-else-if="scope.row.important==0">否</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="note" label="备注"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="操作" width="180px">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" @click="edit(scope.row)" v-has="'basic:household:update'" :disabled="scope.row.residentStatus==1">编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" @click="del(scope.row)" v-has="'basic:household:delete'" :disabled="scope.row.residentStatus==0 && scope.row.identity==0">删除</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
            <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
            <!-- <ed-export :dataApi="dataApi" v-if="isEdExport" @exportSuccess="exportSuccess"></ed-export> -->
        </PageCard>
    </Page>
</template>

<script>
import EdExport from "src/components/EdExport.vue";
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import HousePicker from 'src/components/HousePicker/index.vue'
import RoomInput from 'src/components/HousePicker/RoomInput.vue'
import { defineComponent } from 'vue'
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import {householdList,delMerchant} from "./api.js";
import {getDictByCode} from "src/api/dictionaries";
export default defineComponent({
    name: 'household',
    components: { Page, PageCard, ApiTable, EdSelect,EdExport ,EdConfirmDelete ,HousePicker, RoomInput},
    data() {
        return {
            params: {
                villageName:'',
                residentName:'',
                residentPhone:'',
                identity:"",
                residentStatus:'',
                rooms: undefined
            },
            identityParams:{
                options: [],
                placeholder:"请选择住户身份"
            },
            residentStatusParams:{
                options: [],
                placeholder:"请选择住户状态"
            },
            isEdExport:false,
            dataApi:{
                url:"/resource/room/export",
                pages:0
            },
            confirmRow:''
        }
    },
    created() {
         getDictByCode("status").then(response => {
            if(response.success) {
                this.residentStatusParams.options=response.data.items

            }
        })
        getDictByCode("household_identity").then(response => {
            if(response.success) {
                this.identityParams.options=response.data.items
            }
        })
    },
    activated(){
        this.$nextTick(()=>{
            this.$refs.table.load()
        })
    },
    methods: {
        tableApi:householdList,
        search(){
            this.$refs.table.load(1)
        },
        reset(){
            this.params = {
                villageName:'',
                residentName:'',
                residentPhone:'',
                identity:"",
                residentStatus:'',
                rooms: undefined
            };
            this.$refs.housePicker.reset()
            this.$nextTick(()=>{
                this.$refs.table.load(1,10)
                })
        },
        beforeAvatarUpload(file){
            const fileType = file.name.split('.');
            const fileDate = fileType.slice(-1);
            if (['xlsx'].indexOf(fileDate[0]) < 0) {
                this.$message.error('仅支持文件格式：.xlsx');
                return false
            }
            const isLt2M = file.size / 1024 / 1024 < 30;
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 30MB!');
            }
            if(isLt2M){
                this.upFile = new FormData();
                this.upFile.append("file",file)
            }
            return isLt2M;
        },
        httpRequest(){
            batchRoom(this.upFile).then(response => {
                if(response.code == 20000) {
                    this.$message.success({
                        message: '导入成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load(this.queryForm)
                }
                this.$refs.popoverRef.doClose()
            }).catch(()=>{
                this.$refs.popoverRef.doClose()
            })
        },
        exportBtn(){
            // console.log(this.$refs.table);
            this.dataApi.pages = this.$refs.table.page.total;
            if(this.dataApi.pages > 0){
                this.dataApi = Object.assign(this.dataApi,this.params);
                this.isEdExport = true;
            }else {
                this.$message.info({
                    message:"暂无数据导出",
                    duration: 2000,
                    center:true
                })
            }
        },
        addOwner(){
            this.$router.push({
                path:'/basic/household-add'
                })
        },
        edit(row){
            this.$router.push({
                path: '/basic/household-update',
                query: {id:row.residentId}
            })
        },
        del(row){
            this.confirmRow = row.residentId;
            this.$refs.confirmDeleteRef.open("操作确认","是否执行此操作？","warning")
        },
        confirmDeleteTrue(){
                delMerchant({id: this.confirmRow}).then(response => {
                    if(response.success) {
                        this.$message.success({
                            message: '住户删除成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
        },
        setDicType(row ,cloumn) {
            let options = this.residentStatusParams.options.find(x => x.value == row.residentStatus)
            return options ? options.label : ''
        }, 
        setDicTypeIdentity(row ,cloumn) {
            let options = this.identityParams.options.find(x => x.value == row.identity)
            return options ? options.label : ''
        }, 
        formatDate(row, column) {
            // 获取单元格数据
            let date = row[column.property];
            if (date) {
                return this.transformDate(date)
            } else {
                return ''
            }
        },
        //标准时间格式转yyyy-MM-dd HH:mm:ss
            transformDate(date) {
                if (date) {
                    let dt = new Date(date);
                    return dt.getFullYear() + '-' +
                        ((dt.getMonth() + 1) < 10 ? ('0' + (dt.getMonth() + 1)) : (dt.getMonth() + 1)) + '-' +
                        (dt.getDate() < 10 ? ('0' + dt.getDate()) : dt.getDate()) + ' ' 
                } else {
                    return ''
                }
            },
            houseInput(data){
                console.log('=====',data);
            }
    }
})
</script>

<style>
</style>